<template>
  <div style="width: 390px;">
    <div style="margin-top:5px">
        <el-input style="width: 300px;height: 45px;" v-model = "title1"  placeholder="Type to search...">
            <template #prefix>
                <el-icon @click = "detail(title1)"><Search /></el-icon>
            </template>
        </el-input>
    </div>
    <div>
    <el-container>
      <el-header style="display: flex;flex-direction: row;">
        <div style="width: 100%;">
          <el-menu style="display: flex;flex-direction: row;" router>
            <el-menu-item style="width: 42px;height: 20px; padding-left: 2px;margin-top: 18px;margin-left: -35px; font-family: 宋体;font-size: 20px;font-weight: bold;color: black;" index="/">全部</el-menu-item>
            <el-menu-item style="width: 42px;height: 20px; margin-left: -5px;margin-top: 18px; font-family: 宋体;font-size: 20px;font-weight: bold;color: black;" index="/shipin">视频</el-menu-item>
            <el-menu-item style="width: 42px;height: 20px; margin-left: 15px;margin-top: 18px; font-family: 宋体;font-size: 20px;font-weight: bold;color: black;" index="/meishi">美食</el-menu-item>
            <el-menu-item style="width: 42px;height: 20px; margin-left: 15px;margin-top: 18px; font-family: 宋体;font-size: 20px;font-weight: bold;color: black;" index="/jiazhuang">家装</el-menu-item>
            <el-menu-item style="width: 42px;height: 20px; margin-left: 15px;margin-top: 18px; font-family: 宋体;font-size: 20px;font-weight: bold;color: black;" index="/yinshi">影视</el-menu-item>
            <el-menu-item style="width: 84px;height: 20px; margin-left: 15px;margin-top: 18px; font-family: 宋体;font-size: 20px;font-weight: bold;color: black;" index="/kexuekepu">科学科普</el-menu-item>
            <el-menu-item style="width: 42px;height: 20px; margin-left: 15px;margin-top: 18px; font-family: 宋体;font-size: 20px;font-weight: bold;color: black;" index="/car">汽车</el-menu-item>
            <el-menu-item style="width: 42px;height: 20px; margin-left: 15px;margin-top: 18px; font-family: 宋体;font-size: 20px;font-weight: bold;color: black;" index="/shougong">手工</el-menu-item>
          </el-menu>
          </div>
      </el-header>
      <el-main style="margin-left: -30px;">
        <RouterView />
      </el-main>
    </el-container>
    </div>
  </div>
</template>

<style scoped>

</style>

<script setup>
//查询
import {Search} from "@element-plus/icons-vue"
import {ref} from 'vue'
const title1 = ref("")
import { useRouter } from 'vue-router';
const router1 = useRouter();
const detail = (title) => {
  // 如果是内部路由跳转 (Vue Router)
  router1.push({path:'/sousuoTiaozhuan',query:{mytitle:title}})


};
</script>